<template>
  <div class="product">
    <span>PVC</span>
    <span>20</span>
    <span>630</span>
    <div class="schedule">
      <div class="schedule_p">
        <p class="ones"></p>
        <p class="twos"></p>
      </div>
      <span>86%</span>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.product {
  display: flex;
  width: 100%;
  line-height: 40px;
}
.product .schedule {
  flex: 40%;
  display: flex;
  justify-content: space-between;
}
.schedule_p {
  position: relative;
  width: 80%;
}
.schedule_p .ones {
  position: absolute;
  width: 86%;
  height: 20px;
  border-radius: 10px;
  left: 0;
  top: 10px;
  margin: auto 0;
  background: #6ff;
}
.schedule_p  .twos {
  position: absolute;
  width: 100%;
  height: 20px;
  border-radius: 10px;
  left: 0;
  top: 10px;
  border: 1px solid #fff;
  margin: auto 0;

}
.product span {
  flex: 1;
  text-align: center;
}
</style>